<template>
	<div>
		<ul class="menuUl">
			<li v-for="(item, i) in myTeam" :key="item.id">
				<div class="menuLiTitle" @click="menuUlClick(item)">
					<i slot="suffix" class="el-icon el-icon-arrow-down" :class="item.isShow?'isMenuShow':''"></i>
					{{item.labelName}}
				</div>
				<ul class="subordinateMenuUl" v-if="item.children && item.children.length > 0 && item.isShow">
					<li v-for="(list, l) in item.children" :key="list.id" class="subordinateMenuUlLi" :class="isSelectId==list.id?'isSelectLi':''">
						<div v-if="list.children && list.children.length > 0" class="">
							<div class="menuLiTitle" @click="subordinateMenuUlClick(list, i, '1')">
								<i slot="suffix" class="el-icon el-icon-arrow-down" :class="list.isShow?'isMenuShow':''"></i>
								{{list.labelName}}
							</div>
							<ul class="dubleMenuUl" v-if="list.children && list.children.length > 0 && list.isShow">
								<li v-for="(child, l) in list.children" :key="child.id" class="subordinateMenuUlLi" @click="dubleMenuUlClick(child, item, true, i, l)"
								 :class="isSelectId==child.id?'isSelectLi':''">
									<div class="subordinateMenuUlLiDivChild">{{child.labelName}}</div>
								</li>
							</ul>
						</div>
						<div v-else @click="dubleMenuUlClick(list, item, false, i, '')" class="subordinateMenuUlLiDiv">{{list.labelName}}</div>
					</li>
				</ul>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				myTeam: [{
						labelName: '我的团队',
						id: 'myTeam',
						isShow: true,
						icon: require('@/assets/image/management/management2.png'),
						children: [{
								labelName: '创建团队/组织',
								url: '/myteam/teaminfo/creationteam',
								id: 11
							},
							{
								labelName: '加入团队/组织',
								url: '/myteam/teaminfo/jointeam',
								id: 12
							}
						]
					},
					{
						labelName: this.$store.state.company.companyName,
						// labelName: '通讯录管理通讯录管理通讯录管理通讯录管理通讯录管理通讯录管理通讯录管理通讯录管理',
						id: 2,
						isShow: true,
						icon: require('@/assets/image/management/management2.png'),
						children: [{
								labelName: '通讯录管理',
								url: '/await',
								id: 21,
								isShow: false,
								children: [{
										labelName: '成员管理',
										url: '/myteam/teaminfo/member',
										id: 211
									},
									{
										labelName: '部门管理',
										url: '/myteam/teaminfo/department',
										id: 212
									},
									{
										labelName: '邀请成员',
										url: '/myteam/teaminfo/invitation',
										id: 213
									},
									{
										labelName: '管理员设置',
										url: '/myteam/teaminfo/adminsetting',
										id: 214
									}
								]
							},
							{
								labelName: '团队认证',
								url: '/myteam/teaminfo/teamattestation',
								id: 22
							},
							{
								labelName: '个性化管理',
								url: '/await',
								id: 23
							},
							{
								labelName: '信息安全',
								url: '/await',
								id: 24
							}
						]
					}
				],
				isSelectId: '',
				userId: '',
				breadcrumb: new Map()
				
			}
		},
		created() {
			this.$store.commit('set_navIndex', 1)
			this.$store.commit('set_lowerIsShow', true)
			this.$store.commit('set_lowerIndex', 1)
		},
		// computed: {
		// 	companyName () {
		// 		return this.$store.state.company.companyName
		// 	}
		// },
		// watch:{
		// 	companyName (newData) {
		// 		this.setCompanyName(newData)
		// 	}
		// },
		mounted() {
			
			this.userId = this.$store.state.user.userInfo.id
			this.$nextTick(() => {
				this.isSelectId = this.$store.state.navState.teamNavIndex
				// this.getCompanyList()
			})
		},
		methods: {
			// setCompanyName(name){
			// 	// 动态设置公司名字
			// 	this.myTeam[1].labelName = name
			// 	// 为避免内置所有页面全部监听公司切换变化，
			// 	// 故而从定向到我的团队列表
			// 	// 折叠除公司以外的菜单
			// 	this.$set(this.myTeam[1].children, 'isShow', false)
			// 	// this.myTeam[1].children.isShow = false
			// },
			menuUlClick(item) {
				// 点击事件--切换点击效果
				item.isShow = !item.isShow
				if (item.id !== 'myTeam' && item.isShow) {
					// 如果是点击的公司,清空map，重新设置company，并转换为字符串存入vuex
					this.breadcrumb.clear()
					this.breadcrumb.set('company', item.labelName)
					let breadcrumbdata = [...this.breadcrumb.values()].join(',')
					this.$store.commit('set_breadcrumb', breadcrumbdata)
				} else {
					// 如果点击我的团队，直接跳转到团队列表
					this.$router.push(`/myteam/teaminfo/teamlist?t=${new Date().getTime()}`)
				}
			},
			subordinateMenuUlClick(item) {
				// 点击事件--切换点击效果
				item.isShow = !item.isShow
				
				//-----------------------------------------------------------------------------------
				if (item.isShow) {
					// 如果子级为展开的状态,删除最后一个map值,设置subordinate,并转换为字符串存入vuex
					this.breadcrumb.delete('duble')
					this.breadcrumb.set('subordinate', item.labelName)
					let breadcrumbdata = [...this.breadcrumb.values()].join(',')
					this.$store.commit('set_breadcrumb', breadcrumbdata)
				}
			},
			/**
			 * @param {Object} item 当前点击的子类对象
			 * @param {Object} par 当前点击的公司对象
			 * @param {Object} duble 是否有子级对象
			 * @param {Object} i 当前点击的公司对象的index
			 * @param {Object} l 当前点击对象有子级的对象的index，无子级为空
			 */
			dubleMenuUlClick(item, par, duble, i, l) {
				// 记录当前点击的id
				this.isSelectId = item.id
				this.$store.commit('set_teamNavIndex', item.id)
				// 判断是不是点击的我的团队
				if (par.id !== 'myTeam') {
					// 判断map有没有company和subordinate，避免直接点击下级无法加载公司名称和子目录名
					if(!this.breadcrumb.get('company')){
						this.breadcrumb.set('company', par.labelName)
					}
					if(!this.breadcrumb.get('subordinate') && duble){
						this.breadcrumb.set('subordinate', par.children[l].labelName)
					}
					// 清空最后一级map,并重新设置，避免点击的没有子级菜单
					this.breadcrumb.delete('duble')
					this.breadcrumb.set(duble ? 'duble' : 'subordinate', item.labelName)
				}
				// map转为字符串,存到Vuex
				let breadcrumbdata = [...this.breadcrumb.values()].join(',')
				this.$store.commit('set_breadcrumb', breadcrumbdata)
				// 执行当前点击对象的跳转,如没有url,跳转到404
				this.$router.push(item.url ? `${item.url}?t=${new Date().getTime()}` : '404')
			},

			getCompanyList() {
				// 获取用户所有公司列表
				this.$request.postForm(this.$api.getCompanyByUser, {
					userId: this.userId
				}).then(res => {
					if (res.code == 200) {
						// this.myTeam = this.myTeam.concat(res.data)
						// isShow
						res.data.forEach((v=>{
							v.isShow = false
							v.children = []
							this.myTeam.push(v)
						}))
						// this.myTeam.push(res.data)
						// console.log(this.myTeam)
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.menuUl,
	.subordinateMenuUl {
		width: 100%;
	}

	.menuLiTitle {
		width: 100%;
		height: 40px;
		line-height: 40px;
		position: relative;
		padding-left: 30px;
		cursor: pointer;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.el-icon {
		position: absolute;
		left: 10px;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 14px;
		height: 14px;
		color: #909090;
		transition: transform .2s;
		transform: rotate(-90deg);
		transform-origin: center;
	}

	.subordinateMenuUl .subordinateMenuUlLi {
		/* padding-left: 50px; */
		width: 100%;
		line-height: 40px;
		position: relative;
		cursor: pointer;
		color: #333333;
	}

	.subordinateMenuUlLiDiv {
		padding-left: 50px;
	}

	.subordinateMenuUlLiDivChild {
		padding-left: 70px;
	}

	.subordinateMenuUl .menuLiTitle {
		padding-left: 50px;
	}

	.subordinateMenuUl .el-icon {
		left: 30px;
	}

	.dubleMenuUl .subordinateMenuUlLi {
		/* padding-left: 20px; */
		color: #808080;
	}

	.isMenuShow {
		transform: rotate(0deg);
	}

	ul li {
		position: relative;
		padding-right: 10px;
	}

	.isSelectLi {
		background: #E5F4E9;
		color: #23B14D;
	}

	.isSelectLi::before {
		content: '';
		position: absolute;
		width: 4px;
		height: 100%;
		background: #23B14D;
		left: 0;
		top: 0;
		bottom: 0;
	}
</style>
